<template>
  <div class="home" >
    <el-header>
      <div :class="this.$store.state.collapse.isCollapse?'collapse':' '" id="nav_left">
        <h1>
          <a href="javascript:;" v-if="!this.$store.state.collapse.isCollapse">ERP管理系统</a>
          <a href="javascript:;" v-else>ERP</a>
        </h1>
      </div>





      
      <div id="nav_right"  :class="this.$store.state.collapse.isCollapse?'mleft':' '">
        <ul class="dlog">
          <!-- 开关侧边栏 -->
          <li> <i :class="this.$store.state.collapse.isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold' " @click="changeCollapse"></i></li>
        </ul>
        <ul class="user_rig">
          <!-- 切换主题颜色 -->
          <li @click="Skin()"><i class="el-icon-setting"></i></li>
          <li>
            <el-dropdown @command="handleCommand">
              <span><img src="../assets/images/user.png" alt="">{{ username }}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">修改密码</el-dropdown-item>
                <el-dropdown-item command="b">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </el-header>
    <!-- 全局修改密码 -->
    <el-dialog :visible.sync="dialogPassFormVisible">
      <el-form :model="passForm" :rules="rules" ref="passForm" label-width="100px">
        <el-form-item label="用户名">
          <span>{{ username }}</span>
        </el-form-item>
        <el-form-item label="原密码" prop="password">
          <el-input v-model="passForm.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="passForm.newpassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="okPassWord">
          <el-input v-model="passForm.okPassWord"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="cancel" @click="resetForm('passForm')">取消</el-button>
          <el-button class="oktext" @click="submitForm('passForm')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <main>
      <div class="tabs" v-if="$route.path == '/home/echarts'" style="display: none;"></div>
      <div id="tabs" v-else  :class="this.$store.state.collapse.isCollapse?'lefto':' '">
        <Tags></Tags>
      </div>
       <HomeCenter></HomeCenter>
    </main>
   
  </div>
</template>

<script>
import HomeCenter from '../components/HomeCenter.vue';
import Tags from '../components/headerCom/Tags.vue';

export default {
  name: "Home",
  data() {
    return {
      dialogPassFormVisible: false,
      username: sessionStorage.getItem('username'),
      rolepassword: sessionStorage.getItem('password'),
      passForm: {
        okPassWord: '',
        password: "",
        newpassword: "",
        t: '',
      },
      rules: {
        password: [
          { required: true, message: '原密码不能为空', trigger: 'blur' },
        ],
        newpassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
        ],
        okPassWord: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
  //  console.log(this.$route.path);
  },
  methods: {
    // 切换侧边栏
    changeCollapse(){
                this.$store.commit('changeCollapse',!this.$store.state.collapse.isCollapse)
            },
    
    //退出登录
    loginout() {
      this.$confirm('是否退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!已回到登录页。'
        });
        this.$router.push({ path: '/login' })
        sessionStorage.removeItem('token')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
    //修改密码的接口
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          const { data: res } = await this.axios.post("api/sys/user/password", { newPassword: this.passForm.newpassword, password: this.passForm.password, t: this.passForm.t });
          console.log(res);
          if (res.msg == "success") {
            this.$message.success("修改成功");
            this.$router.push("/login");
          }
          if (res.msg != "success") {
            this.$message.err("参数不正确，修改失败");
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogPassFormVisible = false;
      },
    putpassword() {
      this.dialogPassFormVisible = true;
      this.passForm.t = new Date().getTime();
    },
    handleCommand(command) {
      if (command == "b") {
        this.loginout();
        return
      }
      if (command == "a") {
        this.putpassword();
        return
      }
    },
    Skin(){
      this.$router.push('/home/skin')
    },
  },
  components: {
    HomeCenter,
    Tags,
  },
};
</script>
<style lang="less" scoped>
.collapse{
  width: 68px !important;
}
.home{
  height: 100%;
}

.el-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 0 !important;
  height: 50px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  // background-color: #17b3a3;

  .bs {
    display: none;
  }

  #nav_left {
    position: relative;
    float: left;
    width: 230px;
    height: 50px;
    overflow: hidden;
    background-color: #1890ff;

    h1 {
      display: table-cell;
      vertical-align: middle;
      width: 230px;
      height: 50px;
      margin: 0;
      line-height: 50px;
      font-size: 20px;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      color: #fff;

      a {
        color: #fff;
      }
    }
  }
  .mleft {
   margin-left: 0 !important;
  }
  #nav_right {
    display: flex;
    height: 100%;
    margin-left: 230px;
    padding-right: 15px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    transition:  background-color .2s  ease-in;
    background-color: #1890ff;
    .el-dropdown-selfdefine{
    color: #fff;
    }
    .dlog {
      li {
        padding: 0 20px;
        cursor: pointer;
      }

      i {
        font-size: 18px;
        cursor: pointer;
      }

    }

    .user_rig {
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        padding: 0 20px;
        cursor: pointer;
      }

      img {
        width: 36px;
        margin-right: 5px;
        border-radius: 100%;
        vertical-align: middle;
      }
    }


  }
}
main{
  height: 100% !important;
  padding-top: 50px;
}
::v-deep .el-dialog {
  min-width: 588px !important;
}

::v-deep .el-form-item__content {
  text-align: left !important;
}

::v-deep .el-form-item:nth-child(5) {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;

  .el-button {
    font-size: 14px;
    border-radius: 4px;
  }

  .el-button:nth-child(1) {
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
  }

  .el-button:nth-child(1):hover {
    color: #17b3a3;
    border-color: #b9e8e3;
    background-color: #e8f7f6;
  }

  .el-button:nth-child(2) {
    color: #fff;
    background-color: #17b3a3;
    border-color: #17b3a3;
  }

  .el-button:nth-child(2):hover {
    background: #45c2b5;
    border-color: #45c2b5;
    color: #fff;
  }
}
#tabs{
  position: fixed;
    top: 50px;
    // 69px
    left: 230px;
    right: 0;
    z-index: 930;
    height: 40px;
    line-height: 40px;;
    padding: 0 55px 0 15px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    background-color: #fff;
}
.lefto{
  left: 69px !important;
}
</style>
